<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>Document</title>
        <link rel="stylesheet" href="css/normalize.css" />
        <link rel="stylesheet" href="css/jquery.steps.css" />
        <link rel="stylesheet" href="css/main.css" />
    </head>
    <body>
        <div id="example-manipulation">
            <h3>Add Step</h3>
            <section>
                <p>
                    <label for="title-3">HTML Title *</label><br />
                    <input id="title-3" type="text"><br />
                    <label for="text-3">HTML Content *</label><br />
                    <textarea id="text-3" rows="5"></textarea>
                </p>
                <p><a href="javascript:void(0);" onclick="$('#wizard-4').steps('add', { title: $('#title-3').val(), content: $('#text-3').val() });">Add</a></p>
                <p>(*) Mandatory</p>
            </section>
            <h3>Insert Step</h3>
            <section>
                <p>
                    <label for="position-3">Position (zero-based) *</label><br />
                    <input id="position-3" type="text"><br />
                    <label for="title2-3">HTML Title *</label><br />
                    <input id="title2-3" type="text"><br />
                    <label for="text2-3">HTML Content *</label><br />
                    <textarea id="text2-3" rows="5"></textarea>
                </p>
                <p><a href="javascript:void(0);" onclick="$('#wizard-4').steps('insert', Number($('#position-3').val()), { title: $('#title2-3').val(), content: $('#text2-3').val() });">Insert</a></p>
                <p>(*) Mandatory</p>
            </section>
            <h3>Remove Step</h3>
            <section>
                <p>
                    <label for="position2-3">Position (zero-based) *</label><br />
                    <input id="position2-3" type="text">
                </p>
                <p><a href="javascript:void(0);" onclick="$('#wizard-4').steps('remove', Number($('#position2-3').val()));">Remove</a></p>
                <p>(*) Mandatory</p>
            </section>
        </div>
        <script src="http://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <script src="js/jquery.steps.min.js"></script>
        <script src="js/jquery.validate.min.js"></script>
        <script src="js/messages_zh.min.js"></script>
        <script>
            $("#example-manipulation").steps({
                headerTag: "h3",
                bodyTag: "section",
                enableAllSteps: true,
                enablePagination: false
            });
        </script>
    </body>
</html>